<template>
	<view class="location">
		<an-nav-bar title="选择服务地址"></an-nav-bar>
		<view class="search flex" @click="chooseLocation">
			<view class="area flex">
				<text>{{$mStore.state.location.cityName}}</text>
			</view>
			<view class="text flex">
				<input type="text" placeholder="搜索小区/学校/写字楼">
			</view>
		</view>
		<view class="content">
			<view class="current">
				<view class="c_title flex">当前地址</view>
				<view class="c_current flex_sw">
					<view class="c_ads" @click="setLocation(location)">{{location.address}}</view>
					<view class="c_reflush flex" @click="refreshLocation()">刷新定位</view>
				</view>
			</view>
			<view class="common" v-if="csListArrl.length">
				<view class="c_title flex">常用地址</view>
				<view class="address">
					<view class="line" v-for="ads in csListArrl" :key="ads.id" @click="commonAddress(ads)">
						<view class="name">{{ads.area}}</view>
						<view class="contact flex">
							<text>{{ads.concatName}}</text>
							<text>+86{{ads.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="add_new flex" @click="gotoAddress">
					<text>新增地址</text>
				</view>
			</view>
			<view class="list">
				<view class="l_title flex">附近地址</view>
				<view class="item" v-for="item in locationPois" :key="item.id" @click="setLocation(item)">
					<view class="name">{{item.title}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: {},
				locationPois: [],
				csListArrl: []
			};
		},
		onLoad() {
			this.getLocation()
			this.$http.get('/app/customer/customerAddress/list').then(res => {
				this.csListArrl = res.rows
			})
		},
		methods: {
			// 打开地图选择位置
			chooseLocation() {
				const that = this;
				uni.chooseLocation({
					success(res) {
						console.log(res);
						that.$http.get(
							`/appNoAuth/store/massageTechnician/getAddress/${res.longitude}/${res.latitude}`
						).then(r => {
							let result = r.data || r.result
							let data = JSON.parse(result)
							that.location = data.result
							let obj = {
								address: that.location.address,
								cityId: that.location.ad_info.city_code,
								cityName: that.location.ad_info.city,
								latitude: that.location.location.lat,
								longitude: that.location.location.lng,
								name: that.location.formatted_addresses.recommend
							}
							that.$mStore.dispatch('locationChange', obj);
						})
					}
				});
			},
			commonAddress(item) {
				let _this = this
				_this.$http.get(
					`/appNoAuth/store/massageTechnician/getAddress/${item.longitude}/${item.latitude}`
				).then(r => {
					let result = r.data || r.result
					let data = JSON.parse(result)
					_this.location = data.result
					let obj = {
						address: _this.location.address,
						cityId: _this.location.ad_info.city_code,
						cityName: _this.location.ad_info.city,
						latitude: _this.location.location.lat,
						longitude: _this.location.location.lng,
						name: _this.location.formatted_addresses.recommend
					}
					_this.$mStore.dispatch('locationChange', obj);
					_this.$mHelper.back()
				})
			},
			setAddress(item) {
				this.$http.get('/app/customer/customerAddress/list').then(res => {
					this.csListArrl = res.rows
				})
			},
			gotoAddress() {
				uni.navigateTo({
					url: '/pages/my/address?tId=111'
				})
			},
			refreshLocation() {
				uni.showLoading({
					title: '刷新中'
				})
				this.getLocation()
			},
			setLocation(item) {
				
				let _this = this
				_this.$http.get(
					`/appNoAuth/store/massageTechnician/getAddress/${item.location.lng}/${item.location.lat}`
				).then(r => {
					let result = r.data || r.result
					let data = JSON.parse(result)
					_this.location = data.result
					let obj = {
						address: _this.location.address,
						cityId: _this.location.ad_info.city_code,
						cityName: _this.location.ad_info.city,
						latitude: _this.location.location.lat,
						longitude: _this.location.location.lng,
						name: _this.location.formatted_addresses.recommend
					}
					_this.$mStore.dispatch('locationChange', obj);
					_this.$mHelper.back()
				})
			},
			getLocation() {
				var fr=1;
				
				let _this = this
				//网页获取的是gps坐标，需要转换成腾讯坐标
				uni.getLocation({
					type: 'wgs84',
					//isHighAccuracy: true,
					//type: 'gcj02',
					success: (res) => {
						//alert(res.longitude+"-"+res.latitude);
						uni.hideLoading()
						_this.$http.get(
							`/appNoAuth/store/massageTechnician/getAddress/${res.longitude}/${res.latitude}?fr=`+fr
						).then(r => {
							let {
								result
							} = JSON.parse(r.data)
							_this.locationPois = result.pois
							_this.location = result
							let obj = {
								address: _this.location.address,
								cityId: _this.location.ad_info.city_code,
								cityName: _this.location.ad_info.city,
								latitude: _this.location.location.lat,
								longitude: _this.location.location.lng,
								name: _this.location.formatted_addresses.recommend
							}
							if (!_this.$mStore.state.location.cityName) {
								_this.$mStore.dispatch('locationChange', obj);
							}
						})
					}
				});
			},
			getSetting() {
				const that = this
				uni.getSetting({
					success(res) {
						console.log(res.authSetting)
					}
				})
			},
			getAuthorize() {
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						that.getLocation()
					},
					// 授权失败
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '请授权位置获取附近的商家!',
							showCancel: false,
							confirmText: '确认授权',
							success() {
								uni.openSetting({
									success(res) {},
									fail(err) {}
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.location {
		background: #ffffff !important;
		min-height: 100vh;
	}

	.content {
		padding: 96rpx 30rpx;

		.list {
			.l_title {
				font-size: 26rpx;
				font-weight: 500;
				color: #666;
				padding: 20rpx 0 24rpx;

				&:before {
					content: "";
					width: 24rpx;
					height: 28rpx;
					background: url(/static/weizhi.png) no-repeat;
					background-size: 100% auto;
					margin-right: 8rpx;
				}
			}

			.item {
				margin-bottom: 30rpx;

				.name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 6rpx;
				}

				.address {
					font-size: 22rpx;
					font-weight: 400;
					color: #666;
				}
			}
		}

		.add_new {
			padding: 20rpx 0;

			text {
				display: block;
				font-size: 26rpx;
				font-weight: 500;
				color: #aa8050;
				flex: 1;
			}

			&::after {
				content: "";
				display: block;
				background: url(/static/grey-arrow-right.png) no-repeat;
				background-size: 100% auto;
				width: 12rpx;
				height: 22rpx;
				margin-left: 20rpx;
			}
		}

		.address {
			.line {
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;

				.contact {
					font-size: 22rpx;
					font-weight: 400;
					color: #666;

					>text {
						padding-right: 30rpx;
					}
				}

				.name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 6rpx;
				}
			}
		}

		.c_title {
			font-size: 26rpx;
			font-weight: 500;
			color: #666;
			padding: 30rpx 0 10rpx;
		}

		.common {
			.c_title {
				&:before {
					content: "";
					width: 26rpx;
					height: 26rpx;
					background: url(/static/fang.png) no-repeat;
					background-size: 100% auto;
					margin-right: 8rpx;
				}
			}
		}

		.current {
			.c_current {
				padding: 10rpx 0 14rpx;

				.c_reflush {
					font-size: 26rpx;
					font-weight: 400;
					color: #000;

					&:before {
						content: "";
						width: 32rpx;
						height: 32rpx;
						background: url(/static/c_reflush.png) no-repeat;
						background-size: 100% auto;
						margin-right: 10rpx;
					}
				}

				.c_ads {
					max-width: 480rpx;
					min-width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					text-align: center;
					background: #f4f4f4;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.c_title {

				&:before {
					content: "";
					width: 26rpx;
					height: 26rpx;
					background: url(/static/feiji.png) no-repeat;
					background-size: 100% auto;
					margin-right: 8rpx;
				}
			}
		}
	}

	.search {
		width: 100%;
		height: 96rpx;
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: calc(var(--status-bar-height) + 88rpx);

		.text {
			width: 580rpx;
			height: 70rpx;
			background: #eee;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding: 0 30rpx;

			&:before {
				content: "";
				width: 32rpx;
				height: 100%;
				background: url(/static/search.png) no-repeat 50%;
				background-size: 32rpx auto;
				margin-right: 10rpx;
			}

			input {
				flex: 1;
				height: 70rpx;
				font-size: 28rpx;
				line-height: 70rpx;
			}
		}

		.area {
			font-size: 26rpx;
			color: #333;
			margin-right: 20rpx;
			white-space: nowrap;

			text {
				display: block;
				margin-right: 10rpx;
				max-width: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&:before {
				content: "";
				width: 22rpx;
				height: 26rpx;
				background: url(/static/area.png) no-repeat;
				background-size: 100% auto;
				margin-right: 6rpx;
			}

			&::after {
				content: "";
				display: block;
				background: url(/static/down-arrow-a.png) no-repeat;
				background-size: 100% auto;
				width: 10rpx;
				height: 6rpx;
			}
		}
	}
</style>
